<template>
  <div class="prop">
    <div class="bg-img">
      <div style="position: absolute;right: 10px;top:20px;z-index: 999;">
        <Icon type="md-close" style="font-size: 32px;color: white" @click="$emit('closeFun', false)" />
      </div>
      <div class="xd-title" style="position: relative">
        <div style="width: 320px;margin-top: 15px;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ propData.townsName?propData.townsName + '车辆详情' :propData.companyName + '车辆详情' }}</div>
        <div style="position: absolute;right: 20px;top: 20px">

        </div>
      </div>
      <div style="height: 64px;display: flex;align-items: center;">
        <Form style="height: 36px;" ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
          <FormItem style="color: white" label="车牌号">
            <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请输入车牌号" clearable />
          </FormItem>
          <FormItem label="经营企业" v-if="!props.propData.companyName">
            <i-input v-model="formDataSearch.vehicleCompanyName" placeholder="请输入经营企业" clearable />
          </FormItem>
          <FormItem label="实时在线状态">
            <i-select v-model="formDataSearch.positionOnlineState" filterable placeholder="请选择实时在线状态" clearable>
              <Option :value="1">在线</Option>
              <Option :value="0">离线</Option>
            </i-select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="searchSubmit">搜索</Button>
            <Button style="margin-left: 10px" type="info" @click="exportData" >导出</Button>
          </FormItem>
        </Form>
      </div>
      <div class="xd-table">
        <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
      </div>
      <Spin :show="spinShow"></Spin>

    </div>
  </div>
</template>

<script setup>
import {reactive,inject,resolveComponent,ref} from 'vue'
import xdTable from '@/components/table/index.vue'
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const props = defineProps(['propData','closeFun'])
const spinShow = ref(false)
const xdTableRef = ref()
const tableData = reactive({
  url: apiUrl.supervisoryAreaCollectVehiclePageList,//请求地址
  method: 'post',//请求方式
  where: {
    vehicleTownsName:props.propData.townsName,
    vehicleCompanyName:props.propData.companyName,
  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  columns: [//表头数据
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: '车牌号', minWidth: 120, key: 'vehiclePlateNo', tooltip: true,},
    {title: '车牌颜色', minWidth: 120, key: 'vehiclePlateColor', tooltip: true, render: (h, params) => {
        if (params.row.vehiclePlateColor == 1) {
          return h(resolveComponent('Tag'), { color: "primary" } , "蓝色");
        } else if (params.row.vehiclePlateColor == 2) {
          return h(resolveComponent('Tag'), { color: "warning" } , "黄色");
        } else if (params.row.vehiclePlateColor == 3) {
          return h(resolveComponent('Tag'), { color: "#515a6e" }, "黑色");
        } else if (params.row.vehiclePlateColor == 4) {
          return h(resolveComponent('Tag'), { color: "default" }, "白色");
        } else if (params.row.vehiclePlateColor == 5) {
          return h(resolveComponent('Tag'), { color: "success" }, "绿色");
        } else if (params.row.vehiclePlateColor == 93) {
          return h(resolveComponent('Tag'), { color: "#8ebe19" }, "黄绿色");
        } else if (params.row.vehiclePlateColor == 9) {
          return h(resolveComponent('Tag'), { color: "blue" } , "其他");
        } else {
          return h(resolveComponent('Tag'), { color: "blue" } , "未获取颜色");
        }
      }
    },


    {title: '入网状态', minWidth: 140, key: 'vehicleInternet', tooltip: true, render: (h, params) => {
        if (params.row.vehicleInternet == 0) {
          return h(resolveComponent('Tag'), { color: "warning" } , "未入网");
        } else if (params.row.vehicleInternet == 1) {
          return h(resolveComponent('Tag'), { color: "primary" } , "已入网");
        }
      }
    },

    {title: '营运状态', minWidth: 160, key: 'vehicleOperate', tooltip: true,render: (h, params) => {
        if (params.row.vehicleOperate == 1) {
          return h(resolveComponent('Tag'), { color: "primary" } , "营运车辆");
        } else if (params.row.vehicleOperate == 2) {
          return h(resolveComponent('Tag'), { color: "warning" } , "非营运车辆");
        }
    }},

    {title: '车架号', minWidth: 180, key: 'vehicleVinNo', tooltip: true,},
    {title: '发动机号', minWidth: 120, key: 'vehicleEngineNo', tooltip: true,},
    {title: '发动机型号', minWidth: 220, key: 'vehicleEngineModel', tooltip: true,},
    {title: '经营类型', minWidth: 120, key: 'vehicleOperateTypeName', tooltip: true,},
    {title: '运政类型', minWidth: 120, key: 'vehicleOperateTypeSubName', tooltip: true,},
    {title: '燃料种类', minWidth: 120, key: 'vehicleFlueType', tooltip: true,},
    {title: '车辆类型', minWidth: 180, key: 'vehicleType', tooltip: true,},
    {title: '车辆品牌', minWidth: 120, key: 'vehicleBrand', tooltip: true,},
    {title: '车辆型号', minWidth: 160, key: 'vehicleModel', tooltip: true,},
    {title: '经营许可证号', minWidth: 220, key: 'vehicleCompanyNo', tooltip: true,},

    {title: '经营企业', minWidth: 220, key: 'vehicleCompanyName', tooltip: true,},
    {title: '车主联系人', minWidth: 220, key: 'vehicleOwnerName', tooltip: true,},
    {title: '车主联系手机', minWidth: 120, key: 'vehicleOwnerPhone', tooltip: true,},
    {title: '车辆总质量(kg)', minWidth: 130, key: 'vehicleTotalWeight', tooltip: true,},
    {title: '核定载质量(kg)', minWidth: 130, key: 'vehiclePermitWeight', tooltip: true,},
    {title: '准牵引总质量(kg)', minWidth: 140, key: 'vehicleTractionWeight', tooltip: true,},
    {title: '外廓尺寸mm(长 * 宽 * 高)', minWidth: 200, key: 'vehicleLength', tooltip: true, render: (h, params) => {
        return h('span', {}, `${params.row.vehicleLength ? params.row.vehicleLength : '无'} * ${params.row.vehicleWidth ? params.row.vehicleWidth : '无'} * ${params.row.vehicleHigh ? params.row.vehicleHigh : '无'}`)
      }
    },
    {title: '车辆轴数', minWidth: 120, key: 'vehicleAxle', tooltip: true,},
    {title: '行驶证初登日期', minWidth: 220, key: 'vehicleCertificateDate', tooltip: true,},

    {title: '省份名称', minWidth: 140, key: 'vehicleProvinceName', tooltip: true,},
    {title: '地市名称', minWidth: 120, key: 'vehicleCityName', tooltip: true,},
    {title: '所属区县', minWidth: 120, key: 'vehicleCountyName', tooltip: true,},
    {title: '乡镇名称', minWidth: 120, key: 'vehicleTownsName', tooltip: true,},
    {title: '运输证号', minWidth: 150, key: 'vehicleTransportNo', tooltip: true,},
    {title: '道路运输证发证日期', minWidth: 190, key: 'vehicleTransportDate', tooltip: true,},
    {title: '发证机关编码', minWidth: 160, key: 'certCountyCode', tooltip: true,},
    {title: '发证机关', minWidth: 180, key: 'certCountyName', tooltip: true,},

    {title: '最后定位时间', minWidth: 150, key: 'vehiclePositionDate', tooltip: true,},
    {title: '离线时长', minWidth: 150, key: 'vehicleOffLineDay', tooltip: true,},

    {title: '实时在线状态', minWidth: 160, key: 'vehicleOnlineState', tooltip: true,render: (h, params) => {
        if (params.row.vehicleOnlineState == 1) {
          return h(resolveComponent('Tag'), { color: "primary" } , "在线");
        } else if (params.row.vehicleOnlineState == 0) {
          return h(resolveComponent('Tag'), { color: "warning" } , "离线");
        }
      }},

    {title: '当日运营状态', minWidth: 160, key: 'vehicleOperateState', tooltip: true,render: (h, params) => {
        if (params.row.vehicleOperateState == 1) {
          return h(resolveComponent('Tag'), { color: "primary" } , "已运营");
        } else if (params.row.vehicleOperateState == 2) {
          return h(resolveComponent('Tag'), { color: "warning" } , "未运营");
        }
      }},

    {title: '当日运营里程数', minWidth: 150, key: 'vehicleOperateMileage', tooltip: true,},
    {title: '定位是否在省内', minWidth: 160, key: 'positionProvinceState', tooltip: true,render: (h, params) => {
        if (params.row.positionProvinceState == 1) {
          return h(resolveComponent('Tag'), { color: "primary" } , "省内");
        } else if (params.row.positionProvinceState == 2) {
          return h(resolveComponent('Tag'), { color: "warning" } , "省外");
        }
      }},

    {title: '定位所在省份', minWidth: 150, key: 'positionProvinceName', tooltip: true,},

    {title: '定位是否在市内', minWidth: 160, key: 'positionCityState', tooltip: true,render: (h, params) => {
        if (params.row.positionCityState == 1) {
          return h(resolveComponent('Tag'), { color: "primary" } , "市内");
        } else if (params.row.positionCityState == 2) {
          return h(resolveComponent('Tag'), { color: "warning" } , "市外");
        }
      }},
    {title: '定位所在地市', minWidth: 150, key: 'positionCityName', tooltip: true,},
  ],
  pagingParameters: {// 分页参数
    page: 'pageNo',
    limit: 'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
})
const formDataSearch = ref({
  townsName:props.propData.townsName,
  companyName:props.propData.companyName,
})


//搜索方法
const searchSubmit = ()=>{
  let data = JSON.parse(JSON.stringify(formDataSearch.value));
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)

}

/**
 * 导出数据
 */
const exportData = () => {
  $ViewUIPlus.Modal.confirm({
    title: '导出提醒',
    content: '确定要导出数据？',
    onOk: () => {
      spinShow.value = true
      $axios.post(apiUrl.supervisoryAreaCollectVehicleExport,formDataSearch.value).then((res) => {
        if (!!res) {
          spinShow.value = false
          window.open(`${apiUrl.imgUrl}${res.data.data}`)
        }
      }).catch((err) => {
      })
    },
    onCancel: () => {
      //点击取消
    }
  });
}

</script>

<style  lang="less">
.prop{
  //background: red;

  display: flex;
  align-items: center;
  justify-content: center;
  .bg-img{
    position: relative;
    width: 1350px;
    height: 740px;
    padding: 10px 15px;
    //background: red;
    background:url("@/assets/opera/popbg01.png") no-repeat 50% 50%;
    background-size: 100%;
    .xd-title{
      display: flex;
      justify-content: center;
      height: 64px;
      font-size: 24px;
      color: white;
      //background: #2d8cf0;
    }
    .ivu-form .ivu-form-item-label{
      color: white;
    }
    .ivu-input{
      background: rgba(14, 36, 94, 0);
      color: white;
    }
    .ivu-select-input{
      background: rgba(14, 36, 94, 0);
      color: white;
    }
    .ivu-select-selection{
      background: rgba(14, 36, 94, 0);
      color: white;
    }
    .xd-table{
      height: calc(100% - 64px - 78px);
      .ivu-table-wrapper-with-border{
        border: 1px solid #253c6cf5;
      }
      .ivu-table-border:after{
        width:0px;
      }
      .ivu-table:before{
        width:0px;
      }

      .ivu-table{
        background: none;
        color: white;
      }
      .ivu-table-wrapper{

        .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td,.ivu-table th {
          color: #fff !important;
          background-color: #253c6cf5 !important;
        }

        .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td {
          background-color: rgba(37, 61, 112, 0.96) !important;
        }

        .ivu-table-stripe .ivu-table-body tr:nth-child(2n - 1) td {
          background-color: #0e245e !important;
        }

        .ivu-table th {
          border-width: 0px !important;
          border-bottom: 1px solid rgba(30, 70, 154, 0.96) !important;
        }

        .ivu-table td {
          //border-width: 0px !important;
          border: 1px solid #1E469AF4 !important;
        }
      }
      .ivu-page{
        color: white;
        .ivu-page-next, .ivu-page-prev{
          border: 1px solid #1e4bb6;
          background: none;
        }
        .ivu-page-item{
          border: 1px solid #1e4bb6;
          background: none;

        }
        .ivu-page-item a{
          color: #1b54da;
        }
        .ivu-page-item-active a, .ivu-page-item-active:hover a{
          color: #fff;

        }
      }
    }
  }
  // 滚动条宽度
  div::-webkit-scrollbar {
    width: 4px;
    height:6px;
  }
  // 滚动条轨道
  div::-webkit-scrollbar-track {
    background: #00003a;
    //border-radius: 2px;
  }
  // 小滑块
  div::-webkit-scrollbar-thumb {
    background: rgb(239, 239, 239);
  }

}

</style>